</div>
<% if params[:raw] == 'true' %>
<link href="/lib/woofmark/dist/woofmark.min.css" rel="stylesheet">
<link href="/lib/bootstrap-tokenfield/dist/css/tokenfield-typeahead.min.css" rel="stylesheet">
<link href="/lib/bootstrap-tokenfield/dist/css/bootstrap-tokenfield.min.css" rel="stylesheet">

<link href="/lib/publiclab-editor/dist/PublicLab.Editor.css" rel="stylesheet">

<script src="/lib/publiclab-editor/dist/PublicLab.Editor.js"></script>
<% end %>

<% @presentation = @node.has_tag('style:presentation') %>
<% if @presentation && @node.main_image%>
  <div id="main-image-presentation" style="margin-bottom:8px;">
    <a href="<%= @node.main_image.path(:original) %>">
      <%= image_tag(@node.main_image.path(:original), class:"rounded", style:'width: 100vw;margin: 0 calc((100% / 2) - 50vw);margin-top: -21px;margin-bottom: 12px;') %>
    </a>
  </div>
<% end %>

<div class="row">

<div class="col-lg-9" id="main-content">

  <%= render partial: "wiki/header" %>

  <div class="tab-content">

    <% if @node.has_power_tag('alert') && feature("alert-#{@node.power_tag('alert')}") != "" %>
      <%= feature("alert-#{@node.power_tag('alert')}") %>
    <% end %>

    <div id="legacy-editor-container" class="tab-pane active">
      <% if controller.action_name == 'comments' %>
        <%= render partial: "notes/comments", :locals => {:nodes => @nodes} %>
      <% else %>
        <div <% unless @node.has_tag('style:wide') %>style="max-width:800px; word-wrap: break-word;"<% end %> id="content" class="pl-content wiki">
          <% if @node.has_tag('format:raw') %>
            <%= raw @revision.render_body_raw %>
          <% else %>
            <%= raw auto_link(insert_extras(@revision.render_body), sanitize: false) %>
          <% end %>
        </div>
        <% if params[:raw] == 'true' %>
          <div style="display:none;" id="content-raw-markdown" class="pl-content wiki"><%= raw insert_extras(@revision.body_raw) %></div>
        <% end %>
      <% end %>
    </div>

  </div>

  <hr />
</div>

<% if @node.has_tag('sidebar:none') %>
  <%= render partial: "sidebar/none" %>
<% else %>
  <%= render partial: "sidebar/related" %>
<% end %>

<script>
  $(function() {
    $("img").lazyload();

    <% if @fancy %>
      $('#content img').addClass('img-rounded');
    <% end %>

    <% if controller.action_name == 'comments' %>
      // create an instance of the editor
      $E = new Editor();
      // attach tooltips to comment buttons
      $('[data-toggle="tooltip"]').tooltip();
      $('[rel="tooltip"]').tooltip();
    <% end %>

    setupWiki(<%= @node.id %>, "<%= @node.title %>", <%= params[:raw] == 'true' %>, <%= current_user.nil? != true %>);

    $('#main-content h1, h2, h3, h4, h5, h6').each(function (){
      //convert the heading's text to lowercase and remove all spaces
      let headingId = $(this).text().toLowerCase().replace(/\s/g, '');
      $(this).attr('id', headingId);
    });

    tocbot.init({
      // Where to render the table of contents.
      tocSelector: '.js-toc',
      // Where to grab the headings to build the table of contents.
      contentSelector: '#main-content',
      // Which headings to grab inside of the contentSelector element.
      headingSelector: 'h1, h2, h3, h4, h5, h6',
      // For headings inside relative or absolute positioned containers within content.
      hasInnerContainers: true,
    });

    $('.toc-list li').first().css('font-weight', '600');

    $(document).on('click', function (e) {
      let tocBtn = $('#toc-menu')
      if(!tocBtn.is(e.target) && tocBtn.has(e.target).length === 0) {
        //closes the menu when there's a click outside the menu
        $('details').removeAttr('open');
        tocBtn.removeClass('toc-active');
      } else {
        tocBtn.addClass('toc-active');
      }
    });
  });
</script>
